import React from 'react'
import { withRouter } from 'react-router-dom'
import placeholder from './../../images/placeholder.jpg'
import styles from './FocusNewCenter.module.scss'

const CenterItem = ({ item, title, history }) => {
  let first = {}
  if (item && item[0] && item[0].title) {
    first = item[0]
  }

  
  const onMore = () => {
    if (title === '会议论坛') {
      history.push('/mainPage/forum')
    } else if (title === '决策调研') {
      history.push('/mainPage/decision')
    } else {
      history.push('/mainPage/Viewpoint')
    }
  }

  const onItem = (item) => {
    if (item) {
      if (title === '会议论坛') {
        history.push(`/mainPage/commonDetail/forum/${item.id}`)
      } else if (title === '决策调研') {
        history.push(`/mainPage/pageDetail/decision/${item.id}`)
      } else {
        //学者观点
        history.push(`/mainPage/commonDetail/viewpoint/${item.id}`)
      }
    }
  }

  return (
    <div className={styles.center_item}>
      <div className={styles.img_div} onClick={() => onItem(first)}>
        <img src={first.img_url || placeholder} alt=""/>
        <div className={styles.info}>{first.title || ''}</div>
      </div>
      <div className={styles.list}>
        <div className={styles.title}>
          <h1>
            {title}
          </h1>
          <span onClick={() => onMore()}>【更多】</span>
        </div>
        <ul>
          {item.slice(1, 4) && item.slice(1, 4).map((val, index) => {
            return (
              <li key={index} onClick={() => onItem(val)}>{val.title || ''}</li>
            )
          })}
        </ul>
      </div>
    </div>
  )
}
export default withRouter(CenterItem)